<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="dd">
    <!--器材提示框-->
    <div class="scene_tips" v-if="false" :style="getPosition">
      <!-- <img src="@/images/scene_tips.png" class="img_back" /> -->
      <div class="scene_tipsall">{{ tipName }}</div>
    </div>
    <!-- 文字提示框 -->
    <!-- 注意事项 -->
    <!-- 电子天平数显 -->
  </div>
</template>
<script>
import { mixins } from '@/mixin/three'

export default {
  mixins: [mixins], //混入
  components: {},
  props: {
    eritems: Number, //当前二级小步骤
    eritem: Number, //当前所在的二级菜单
    sjstep: Number, //当前所在的三级菜单
    taskstep: Number //当前所在的一级菜单
  },
  // components: { tipError },
  data() {
    return {
      isPointerLocked: false,
      cameraMoveSensitivity: 0.4, //视角灵敏度
      leftMouseBtn: false,
      baseURL: 'https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/shfx/',
      objectReItem: null,
      time: null,
      studyshow: false,
      action: null,
      andh: null,
      jcname: '',
      tipErrorShow: false,
      name: '', //标题名称
      info: '', //标题信息
      i: 1, //相机轨道控制器兼容性问题处理
      // step: 1, //步骤处理
      selectedObjects: [],
      tipPosition: {}, //图标位置
      tipName: null, //提示名字
      tipShow: false,
      playIng: false,
      camera: null,
      scene: null,
      render: null,
      raycaster: null,
      mouse: null,
      objects: [],
      objectFather: null,

      dhfiles: [
        {
          id: 1,
          url: 'QXXBFXY_DH.glb'
        }
      ],
      zoomSpeed: 1,

      cameraOriginal: [-4.51, 1.456, 0.574],
      cameraLookAt: [-4.51, 1.456, 0.674]
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    // document.removeEventListener('keydown', false)
    // document.removeEventListener('keyup', false)
  },
  watch: {
    //监听大步骤taskstep
    //监听大步骤taskstep
    taskstep: {
      handler(item) {
        // this.stopAndReleaseAnimations()
        if (item == 1) {
          //
        }
      },
      immediate: true,
      deep: true
    },
    eritem: {
      handler(item) {
        // this.stopAndReleaseAnimations()
        console.log('小步骤值DF：' + item)
        // this.andh = null
        clearTimeout(this.time)
        if (this.action) {
          this.action.stop()
        }
        this.action = null

        // if (item == 1 && this.taskstep == 3) {
        //   this.initFileS(0)
        // }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    //根据点击的模型播放动画
    clickAfter(realName) {
      console.log('当前点击的模型', realName)
      this.twinklePoint(-3, -3, -3)
      // 动画还没加载完的情况
      if (!this.andh) {
        console.log('当前没有动画数据')
        if (this.action) {
          this.action.stop()
          this.action.paused = true
        }
        this.action = null
        return
      }
      if (this.playIng) {
        // this.step
        if (!this.playIng) {
          console.log('当前任务还未完成禁止下一个')
        } else {
          return
        }
      }
      let animationName = ''

      if (realName == 'DianNao5' && this.eritems == 6 && this.taskstep == 5) {
        this.$emit('clickItem', 'DianNao5')
      }
      // 正确
      if (
        realName == 'XiBaoFenXiYi13_1' &&
        this.eritem == 1 &&
        this.taskstep == 3
      ) {
        this.$emit('tipstextfn', '当前废液桶为空，请继续。')
        this.playIng = false
      }
      if (
        (realName == 'RongXueJi4' ||
          realName == 'RongXueJi3' ||
          realName == 'RongXueJi2' ||
          realName == 'RongXueJi1') &&
        this.eritem == 2 &&
        this.taskstep == 3
      ) {
        this.$emit('tipstextfn', '所有试剂均检查完毕。')
        this.playIng = false
      }

      if (
        realName == 'XiBaoFenXiYi15' &&
        this.eritem == 3 &&
        this.taskstep == 3
      ) {
        this.$emit('tipstextfn', '所有连接管路完好。')
        this.playIng = false
      }
      if (
        realName == 'XiBaoFenXiYi12' &&
        this.eritem == 4 &&
        this.taskstep == 3
      ) {
        this.$emit('tipstextfn', '电源线及插座连接正常。')
        this.playIng = false
      }
      if (
        realName == 'XiBaoFenXiYi3' &&
        this.eritem == 1 &&
        this.taskstep == 4
      ) {
        // XiBaoFenXiYi4

        const newTexture = this.textureLoader.load(
          'https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/shfx/a632e9d859b0021bdb5630f9dc39d177.png'
        )
        this.XiBaoFenXiYi4.material.map = newTexture
        console.log('准备更换贴图', this.XiBaoFenXiYi4.material.map)

        this.$emit('tipstextfn', '已开机')
        this.playIng = false
      }

      if (!animationName) {
        // console.log('dh')
        console.log('未指定播放动画', animationName, '当前小步骤', this.eritems)
        return
      }
      this.clearPoint()
      this.playAction(animationName, realName)
    },
    getRealName(object) {
      //根据模型返回其父级group的名称，且之后在objects中存在的才会返回名称
      let objectNames = this.objectNames
      if (objectNames.includes(object.name)) {
        return object.name
      } else {
        if (object.parent) {
          return this.getRealName(object.parent)
        } else {
          return ''
        }
      }
    },
    onDocumentMouseMove(event) {
      // 相机移动视角
      // 鼠标左键拖动时移动视角
      if (document.pointerLockElement === document.body && this.myshow) {
        this.camera.rotation.x -= event.movementY / 500
        this.camera.rotation.y -= event.movementX / 500
      }

      // if (this.leftMouseBtn && this.myshow) {
      //   this.camera.rotation.x -= event.movementY / 2000
      //   this.camera.rotation.y -= event.movementX / 2000
      // }
      //鼠标移动，用射线检测鼠标覆盖的东西，并弹出标识
      let maincontWidth = this.$el.offsetWidth
      let maincontHeight = this.$el.offsetHeight
      this.mouse.x = (event.offsetX / maincontWidth) * 2 - 1
      this.mouse.y = -(event.offsetY / maincontHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera)
      const intersections = this.raycaster.intersectObjects(this.objects)
      // const intersectionss = this.raycaster.intersectObjects(this.objectss)
      if (intersections.length > 0) {
        document.body.style.cursor = 'pointer'
        let textName = this.getTextName(
          this.getRealName(intersections[0].object)
        )
        this.tipShow = true
        this.tipPosition = {
          x: event.offsetX,
          y: event.offsetY
        }
        this.tipName = textName
      } else {
        document.body.style.cursor = 'initial'
        this.tipShow = false
        this.tipPosition = {
          x: event.offsetX,
          y: event.offsetY
        }
        this.tipName = ''
        this.selectedObjects = []
      }
      // if (intersectionss.length > 0) {
      //   document.body.style.cursor = 'pointer'
      //   let textName = this.getTextName(
      //     this.getRealName(intersectionss[0].object)
      //   )
      //   this.tipShow = true
      //   this.tipPosition = {
      //     x: event.offsetX,
      //     y: event.offsetY
      //   }
      //   this.tipName = textName
      // } else {
      //   document.body.style.cursor = 'initial'
      //   this.tipShow = false
      //   this.tipPosition = {
      //     x: event.offsetX,
      //     y: event.offsetY
      //   }
      //   this.tipName = ''
      //   this.selectedObjects = []
      // }
    }, //鼠标按下播放动画
    onDocumentMouseDown(event) {
      // event.preventDefault()
      //鼠标移动，用射线检测鼠标覆盖的东西，并弹出标识

      let maincontWidth = this.$el.offsetWidth
      let maincontHeight = this.$el.offsetHeight
      this.mouse.x = (event.offsetX / maincontWidth) * 2 - 1
      this.mouse.y = -(event.offsetY / maincontHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera)
      const intersections = this.raycaster.intersectObjects(this.objects)
      // const intersectionss = this.raycaster.intersectObjects(this.objectss)
      // if (intersectionss.length > 0) {
      //   document.body.style.cursor = 'pointer'
      //   if (intersectionss[0].object.name == this.jcname) {
      //     // this.addOutinesss('')
      //     document.exitPointerLock()
      //   }
      //   this.clickAfter(intersectionss[0].object.name)
      // }
      // console.log('射线', intersections)
      if (intersections.length > 0) {
        document.body.style.cursor = 'pointer'
        if (intersections[0].object.name == this.jcname) {
          // this.addOutinesss('')
          document.exitPointerLock()
        }
        this.clickAfter(intersections[0].object.name)
      }

      if (document.pointerLockElement) {
        event.preventDefault()
      } else {
        // 2
      }
    },

    //按照坐标位置显示指示箭头
    twinklePoint(x, y, z) {
      if (this.sprite) {
        this.sprite.visible = true
        this.sprite.position.set(x, y, z)
        this.spriteTimer = setInterval(() => {
          this.sprite.visible = !this.sprite.visible
        }, 600)
      }
    }, //清除指示箭头
    clearPoint() {
      if (this.sprite) {
        this.sprite.visible = false
      }
      if (this.spriteTimer) {
        clearInterval(this.spriteTimer)
        this.spriteTimer = null
      }
    },
    //物品描边提示步骤
    addOutinesss(name) {
      this.jcname = name
      let array = []
      array = this.objects.filter((item) => {
        if (item.name == name) {
          return item
        }
      })
      this.outlinePass.selectedObjects = array
    },

    getTextName(realName) {
      //根据模型名称返回对应汉字
      let textName = ''
      this.objectText.map((item) => {
        if (item.name == realName) {
          textName = item.text
        }
      })
      return textName
    },

    //镜头移动视角切换根据不同的步骤进行操作
    move(position, rotation) {
      // this.controls.enabled = false
      this.camera.position.set(position[0], position[1], position[2])
      this.camera.rotation.set(
        rotation[0] * Math.PI,
        rotation[1] * Math.PI,
        rotation[2] * Math.PI
      )
      this.camera.updateProjectionMatrix()
    }
  }
}
</script>
<style>
.dd {
  height: 100%;
  width: 100%;
}
.mykg {
  position: absolute;
  top: 30%;
  right: 20%;
  color: red;
  cursor: pointer;
  border: solid 1px red;
}
.qdan {
  z-index: 1000;
  position: absolute;
  top: 110px;
  left: calc(50% - 80px);
  cursor: pointer;
}
</style>
